<template>
  <div class="blog-list">
    <div class="article-handler">
      <a-button type="primary" @click="gotoEditArticle">创建文章</a-button>
    </div>
    <a-table :columns="state.articleColumns" :data-source="state.articleList"
             class="article-table"
             rowKey="articleId"
             :pagination="false">
      <template #articleTitle="{ text }">
        <a>{{ text }}</a>
      </template>
      <template #articleTagList="{ text }">
        <a-tag v-for="tag in text" :key="tag">{{ tag }}</a-tag>
      </template>
      <template #isOriginal="{ record }">
        <a-switch v-model:checked="record.isOriginal" @change="changeOriginal(record.articleId, record.isOriginal)" />
      </template>
      <template #action="{ record }">
        <span>
          <a href="javascript:void(0)" @click="editArticle(record.articleId)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            :title="`删除文章【${record.articleTitle}】？`"
            @confirm="deleteArticle(record.articleId)"
          >
            <a href="javascript:void(0)">删除</a>
          </a-popconfirm>
        </span>
      </template>
    </a-table>
    <a-pagination class="pagination" showQuickJumper hideOnSinglePage
                  v-model:current="state.pageData.page"
                  :pageSize="state.pageData.pageSize"
                  :total="state.pageData.total"
                  @change="pageChange"/>
  </div>
</template>
<script>
import {defineComponent, reactive} from 'vue';
import Axios from '../../utils/http-util';
import BackendUrl from '../../constants/backend-url';
import router from '../../router/index';

const state = reactive({
  articleColumns: [
    {
      title: '标题',
      dataIndex: 'articleTitle',
      slots: { customRender: 'articleTitle' }
    },
    {
      title: '类型',
      dataIndex: 'categoryName',
      width: 80
    },
    {
      title: '标签',
      dataIndex: 'articleTagList',
      slots: { customRender: 'articleTagList' }
    },
    {
      title: '原创',
      slots: { customRender: 'isOriginal' }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' }
    }
  ],
  articleList: [],
  pageData: {
    page: 1,
    pageSize: 10,
    total: 107
  }
});

const gotoEditArticle = () => {
  router.push({name: 'article-edit'});
};

const getArticles = () => {
  let params = {params: {page: state.pageData.page, size: state.pageData.pageSize}};
  Axios.get(BackendUrl.blog.article.GET_ARTICLE_LIST, params).then(res => {
    state.articleList = res.data.data;
    state.pageData.page = res.data.page;
    state.pageData.pageSize = res.data.size;
    state.pageData.total = res.data.total;
  });
}

const pageChange = (page) => {
  state.pageData.page = page;
  getArticles();
}

const editArticle = (articleId) => {
  console.log('edit article', articleId);
};

const deleteArticle = (articleId) => {
  Axios.delete(BackendUrl.blog.article.DELETE_ARTICLE.replace('{{articleId}}', articleId)).then(res => {
    getArticles();
  });
};

const changeOriginal = (articleId, isOriginal) => {
  let params = { isOriginal: isOriginal };
  Axios.patch(BackendUrl.blog.article.CHANGE_ORIGINAL.replace('{{articleId}}', articleId), params).then(res => {
    getArticles();
  });
};

export default defineComponent({
  setup() {
    getArticles();

    return {
      state,

      editArticle,
      deleteArticle,
      getArticles,
      pageChange,
      changeOriginal,
      gotoEditArticle
    };
  }
});
</script>

<style scoped lang="scss">
.blog-list {
  .article-handler {
    text-align: left;
  }
  .article-table {
    margin-top: 15px;
  }
  .pagination {
    margin-top: 30px;
  }
}
</style>
